<script setup>
import { ref } from 'vue'
import Swiper from '@/components/Swiper/index.vue'

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  idKey: {
    type: String,
    default: 'id'
  },
  selection: Boolean,
  selectable: Function
})
const emit = defineEmits(['cardClick', 'select-change', 'star'])


function calcDaysInterval(start_datetime, end_datetime) {
  if (!start_datetime || !end_datetime) return 0
  const start = new Date(start_datetime)
  const end = new Date(end_datetime)
  // 计算毫秒差值，转换为天数
  const diff = end - start
  return Math.ceil(diff / (1000 * 60 * 60 * 24))
}


const selectedIds = ref({});
const onSelectChange = () => {
  const selectedRows = props.tableData.filter(item => selectedIds.value[item[props.idKey]]);
  emit('select-change', selectedRows);
}
const onTriggerSelectAll = (val) => {
  const rows = []
  selectedIds.value = props.tableData.reduce((acc, row) => {
    if (props.selectable(row)) {
      acc[row[props.idKey]] = val;
      if (val) rows.push(row);
    }
    return acc;
  }, {});
  emit('select-change', val ? rows : []);
}
defineExpose({
  onTriggerSelectAll,
})

const getColor = (row) => {
  if (row.is_withdraw) {
    return '#e8e8e8'; // 灰色
  }
  if (row.is_litigation) {
    return '#ffffff'; // 无色
  }
  if (row.status === '已收回') {
    return 'rgba(34, 197, 94, 0.1)'; // 淡绿色
  }
  if (row.status === '部分收回') {
    return 'rgba(245, 158, 11, 0.1)'; // 淡橙色
  }
  if (row.status === '未收回') {
    return 'rgba(239, 68, 68, 0.1)';// 淡红色
  }
}
</script>

<template>
  <div class="w-full h-full overflow-y-auto">
    <template v-for="row in tableData" :key="row[props.idKey]">
      <div class="rounded-md border mb-4 shadow-sm border-gray-200 overflow-hidden">
        <!-- 卡片头部 -->
        <div class="flex justify-between px-4 py-2 text-gray-700 border-b text-sm border-gray-200"
          :style="{ backgroundColor: getColor(row) }">
          <div class="flex gap-4 items-center font-bold">
            <el-checkbox v-if="selection" v-model="selectedIds[row[props.idKey]]" :disabled="!selectable(row)"
              @change="onSelectChange" />
            <span>#{{ row.arrears_data_id }}</span>
            <span>{{ row.company_name }} / {{ row.community_name }}</span>
            <span>{{ row.address }}</span>
            <span>{{ row.mobile }}</span>
            <span>{{ row.name }}</span>
            <span>{{ row.case_reason }}</span>
          </div>
          <div class="flex gap-6 items-center">
            <span class="font-bold">跟案:{{ row.user_name }} </span>
            <slot name="handler" :row="row"></slot>
          </div>
        </div>
        <!-- 卡片内容 -->
        <div class="flex gap-4 flex-wrap p-4 text-sm">
          <div class="flex gap-6 items-center">
            <div class="flex flex-col gap-3">
              <div class="flex items-center gap-2">
                <span class="text-gray-500 min-w-23">剩余欠费周期:</span>
                <span class="text-black">{{ row.last_start_datetime }} - {{ row.last_end_datetime }}</span>
                <el-tooltip effect="dark" :content="'欠费周期：' + row.start_datetime + ' - ' + row.end_datetime">
                  <el-icons class="cursor-pointer" name="InfoFilled" :size="14"></el-icons>
                </el-tooltip>
              </div>
              <div class="flex gap-2">
                <span class="text-gray-500 min-w-23">欠费金额:</span>
                <span>
                  <el-money class="text-red-500" :num="row.amount" />
                  (<el-money class="text-gray-500" :num="row.last_amount" />)
                </span>
              </div>
              <div class="flex gap-2">
                <span class="text-gray-500 min-w-23">滞纳金:</span>
                <el-money :num="row.overdue_fine_amount" />
              </div>
            </div>
            <div class="flex flex-col gap-3">
              <div class="flex gap-2">
                <span class="text-gray-500 min-w-18">欠费天数:</span>
                <span class="text-black">{{ calcDaysInterval(row.start_datetime, row.end_datetime) }}天</span>
              </div>
              <div class="flex gap-2">
                <span class="text-gray-500 min-w-18">短信次数:</span>
                <span class="text-black">{{ row.sms_count }}</span>
              </div>
              <div class="flex gap-2">
                <span class="text-gray-500 min-w-18">律师函次数:</span>
                <span class="text-black">{{ row.lawyer_count }}</span>
              </div>
            </div>
          </div>
          <div class="flex">
            <div v-if="row.star_trace_record"
              class="p-4 md:w-60 xl:w-68 2xl:w-80 flex flex-col justify-between rounded border border-zinc-300 bg-zinc-200"
              @click="emit('cardClick', row)">
              <div class="w-full cursor-pointer">
                {{ row.star_trace_record.remark }}
              </div>
              <div class="flex justify-between mt-3">
                <span class="text-black">{{ row.star_trace_record.add_time }}</span>
                <span class="text-black">{{ row.star_trace_record.add_user_name }}</span>
              </div>
            </div>
            <Swiper :categories="row.trace_record_list" class="md:w-[18rem] xl:w-80 2xl:w-[22rem]">
              <template #default="{ cat }">
                <div class="p-4 flex flex-col justify-between rounded border border-zinc-300 bg-zinc-200 h-full"
                  @click="emit('cardClick', row)">
                  <div class="w-full pr-2">{{ cat.remark }}</div>
                  <div class="flex justify-between mt-3">
                    <span class="text-black">{{ cat.add_time }}</span>
                    <span class="text-black">{{ cat.add_user_name }}</span>
                  </div>
                  <div class="absolute top-2 right-2 cursor-pointer" @click.stop="emit('star', row, cat)">
                    <el-icons :name="cat.is_star ? 'StarFilled' : 'Star'" :color="cat.is_star ? '#f7ba2a' : 'black'"
                      size="1rem" />
                  </div>
                </div>
              </template>
            </Swiper>
          </div>
        </div>
      </div>
    </template>
    <EmptyImg v-if="tableData.length === 0" />
  </div>
</template>
